<template>
  <div class="home">
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="460px">
        <el-carousel-item v-for="item in carousel" :key="item.carousel_id">
          <img style="height:460px;" :src="$target + item.imgPath" :alt="item.describes" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图完 -->

    <div class="main-box">
      <div class="main">
        <!-- 手机商品展示区域 -->
        <div class="phone">
          <div class="box-hd">
            <div class="title">手机</div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <router-link to>
                <img :src="$target +'public/imgs/phone/phone.png'" />
              </router-link>
            </div>
            <div class="list">
              <goods-list :isMore="true" :goodsData="phoneList"></goods-list>
            </div>
          </div>
        </div>
        <!-- 手机商品展示区域END -->

        <!-- 家电商品展示区域 -->
        <div class="appliance" id="promo-menu">
          <div class="box-hd">
            <div class="title">家电</div>
            <div class="more" id="more">
              <MyMenu :val="2" @fromChild="getChildMsg">
                <span slot="1">热门</span>
                <span slot="2">电视影音</span>
              </MyMenu>
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img :src="$target +'public/imgs/appliance/appliance-promo1.png'" />
                </li>
                <li>
                  <img :src="$target +'public/imgs/appliance/appliance-promo2.png'" />
                </li>
              </ul>
            </div>
            <div class="list">
              <goods-list :isMore="true" :goodsData="applianceList"></goods-list>
            </div>
          </div>
        </div>
        <!-- 家电商品展示区域END -->

        <!-- 配件商品展示区域 -->
        <div class="accessory" id="promo-menu">
          <div class="box-hd">
            <div class="title">配件</div>
            <div class="more" id="more">
              <MyMenu :val="3" @fromChild="getChildMsg2">
                <span slot="1">热门</span>
                <span slot="2">保护套</span>
                <span slot="3">充电器</span>
              </MyMenu>
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img :src="$target +'public/imgs/accessory/accessory-promo1.png'" alt />
                </li>
                <li>
                  <img :src="$target +'public/imgs/accessory/accessory-promo2.png'" alt />
                </li>
              </ul>
            </div>
            <div class="list">
              <goods-list :isMore="true" :goodsData="accessoryList"></goods-list>
            </div>
          </div>
        </div>
        <!-- 配件商品展示区域END -->
      </div>
    </div>
  </div>
</template>

<script>
import homeApi from "../request/api/homeAPI";
export default {
  name: "VueStoreHome",
  components: {},
  data() {
    return {
      carousel: [], //轮播图
      phoneList: [], //手机列表数据
      miTvList: "", // 小米电视商品列表
      applianceList: "", // 家电商品列表
      accessoryList: "", //配件商品列表
      protectingShellList: "", // 保护套商品列表
      chargerList: "", //充电器商品列表
      applianceActive: 1, // 家电当前选中的商品分类
      accessoryActive: 1, // 配件当前选中的商品分类
    };
  },
  created() {
    // 获取轮播图数据
    this.getCarousel();
    //获取手机数据
    this.getProduct_iphone();
    // 获取家电热门数据
    this.getHotProduct_ele();
    // 获取配件热门数据
    this.getHotProduct_parts();
    //获取家电电器数据
    this.getHotProduct_elec();
    //获取配件保护套数据
    this.getHotProduct_cover();
    //获取充电器数据
    this.getHotProduct_Charger();
  },

  mounted() {},

  methods: {
    //获取轮播图数据
    async getCarousel() {
      let { data: res } = await homeApi.getCarousel();
      console.log(res);
      this.carousel = res.carousel;
    },
    //获取手机商品数据
    async getProduct_iphone() {
      let { data: res } = await homeApi.getPromoProduct({
        categoryName: "手机",
      });
      console.log(res);
      this.phoneList = res.Product;
    },
    // 获取家电热门商品
    async getHotProduct_ele() {
      let { data: res } = await homeApi.getHotProduct({
        categoryName: ["电视机", "空调", "洗衣机"],
      });
      console.log(res);
      this.applianceList = res.Product;
    },
    // // 获取配件热门数据
    async getHotProduct_parts() {
      let { data: res } = await homeApi.getHotProduct({
        categoryName: ["保护套", "保护膜", "充电器", "充电宝"],
      });
      console.log(res);
      this.accessoryList = res.Product;
    },
    // 家电电器
    async getHotProduct_elec() {
      let { data: res } = await homeApi.getHotProduct({
        categoryName: ["电视机"],
      });
      console.log(res);
      this.miTvList = res.Product;
    },
    // //保护套
    async getHotProduct_cover() {
      let { data: res } = await homeApi.getHotProduct({
        categoryName: ["保护套"],
      });
      console.log(res);
      this.protectingShellList = res.Product;
    },
    // //充电器
    async getHotProduct_Charger() {
      let { data: res } = await homeApi.getHotProduct({
        categoryName: ["充电器"],
      });
      console.log(res);
      this.chargerList = res.Product;
    },

    // 获取家电模块子组件传过来的数据
    getChildMsg(val) {
      this.applianceActive = val;
      console.log(this.applianceActive);
    },
    // 获取配件模块子组件传过来的数据
    getChildMsg2(val) {
      this.accessoryActive = val;
      console.log(this.accessoryActive);
    },
  },
  watch: {
    // 家电
    applianceActive: function (val) {
      if (val == 1) {
        this.getHotProduct();
      } else if (val == 2) {
        this.applianceList = this.miTvList;
      }
    },
    // 配件
    accessoryActive: function (val) {
      if (val == 1) {
        this.getHotProduct2();
      } else if (val == 2) {
        this.accessoryList = this.protectingShellList;
      } else if (val == 3) {
        this.accessoryList = this.chargerList;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/index.css";
.home {
  background-color: #fff;
}
</style>
